<template>
    <div>
        <div class="header">
            <!-- 导航 -->
            <navView :isTop="isTop" />
            <!-- 首屏 输入框和图片 -->
            <div home-container>
                <div class="input-box">
                    <!-- 选择框 select -->
                    <div class="input-box-select">
                        校招
                    </div>
                    <!-- 选择框 输入框 -->
                    <div class="input-box-form-item">
                        <input type="text">
                    </div>
                    <!-- 搜索按钮 -->
                    <div class="input-box-search">
                        搜索
                    </div>
                </div>

                <div class="keywords">
                    <span>新招岗位</span>
                    <span>热门企业</span>
                    <span>求职必读</span>
                    <span>干货文章</span>
                </div>
            </div>

        </div>
        <div class="ad">
            <div home-container>
                <el-carousel indicator-position="none" :autoplay="false" height="187px">
                    <el-carousel-item v-for="item in carousel" :key="item">
                        <div class="ad-list">
                            <div class="ad-list-item" :key="i" v-for="i in item">
                                <img :src="i.url" alt="">
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!-- 推荐文章 -->
        <div class="recommend">
            <div home-container>
                <el-row>
                    <el-col :span="24">
                        <div class="static-content-title">
                            <div>推荐文章</div>
                        </div>
                    </el-col>
                    <el-col :span="12" v-for="item in recommend" :key="item">
                        <div class="recommend-grid-cell">
                            <customCard :cardData="item" />
                        </div>
                    </el-col>

                </el-row>
            </div>
        </div>
        <!-- 新招岗位 -->
        <div class="new-recruit">
            <div class="new-recruit-title">新招岗位</div>
            <div class="tabs">
                <tabs @on-click="getIntro" />
            </div>
            <div class="intro" home-container>
                <el-row>
                    <el-col v-for="(item, index) in recruit" :key="index" :span="8">
                        <intro-item :data="item" />
                    </el-col>
                    <el-col :span="24" text-center>
                        <div class="intromore">查看更多 <img src="/images/home/ic_more_2(1).png" alt=""> </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 热门企业 -->
        <div class="remen-qiye">
            <div class="remen-qiye-title">
                热门企业
            </div>
            <div home-container class="remen-qiye-container">

            </div>
        </div>
    </div>
</template>

<script setup>
import navView from 'c/nav.vue';
import customCard from 'c/custom-card.vue';
import tabs from 'c/index-tabs.vue';
import introItem from 'c/index-intro-item.vue';
import { ref } from 'vue';
import {
    ArrowRight,
} from '@element-plus/icons-vue'
const { user } = axiosReq;

let carousel = ref([
    [
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
    ],
    [
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
        { url: "/images/home/zhanwei/Frame 1698.png" },
    ]
])

let recommend = ref([
    { url: "/images/home/zhanwei/Mask group(5).png", title: "【应届生必读】互联网运营面试常见问题", intro: "经过最近十多年的迭代，互联网运营逐渐迈向成熟，出现了很多细分岗位，具体可以最近十多年的迭代，互联网运营逐渐，互联网运营逐渐，互联网运营逐渐", tag: '干货文章', date: "2022-12-12" },
    { url: "/images/home/zhanwei/Mask group(2).png", title: "【应届生必读】互联网运营面试常见问题", intro: "经过最近十多年的迭代，互联网运营逐渐迈向成熟，出现了很多细分岗位，具体可以最近十多年的迭代，互联网运营逐渐，互联网运营逐渐，互联网运营逐渐", tag: '干货文章', date: "2022-12-12" },
    { url: "/images/home/zhanwei/Mask group(3).png", title: "【应届生必读】互联网运营面试常见问题", intro: "经过最近十多年的迭代，互联网运营逐渐迈向成熟，出现了很多细分岗位，具体可以最近十多年的迭代，互联网运营逐渐，互联网运营逐渐，互联网运营逐渐", tag: '干货文章', date: "2022-12-12" },
    { url: "/images/home/zhanwei/Mask group(4).png", title: "【应届生必读】互联网运营面试常见问题", intro: "经过最近十多年的迭代，互联网运营逐渐迈向成熟，出现了很多细分岗位，具体可以最近十多年的迭代，互联网运营逐渐，互联网运营逐渐，互联网运营逐渐", tag: '干货文章', date: "2022-12-12" },


])

console.log(user);
const recruit = ref([
    {
        title: "硬件高级工程师",
        price: "30-60k",
        tags: ['上海', '经验不限', '本科'],
        company: "微软中国"
    },
    {
        title: "硬件高级工程师",
        price: "30-60k",
        tags: ['上海', '经验不限', '本科'],
        company: "中国重工集团"
    },
    {
        title: "硬件高级工程师",
        price: "30-60k",
        tags: ['上海', '经验不限', '本科'],
        company: "微软"
    },
    {
        title: "硬件高级工程师",
        price: "30-60k",
        tags: ['上海', '经验不限', '本科'],
        company: "微软"
    },
    {
        title: "硬件高级工程师",
        price: "30-60k",
        tags: ['上海', '经验不限', '本科'],
        company: "微软"
    }, {
        title: "硬件高级工程师",
        price: "30-60k",
        tags: ['上海', '经验不限', '本科'],
        company: "微软"
    },
])


const getIntro = () => {

}

const isTop = ref(false);


window.onscroll = (e) => {
    var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离);
    console.log(a);
    if (a > 50) {
        isTop.value = true
    } else {
        isTop.value = false
    }
}


</script>


<style>
.header {
    /* height: calc(100vh - 237px); */
    height: 609px;
    background: linear-gradient(360deg, #488DF4 0%, #61AAFF 609px);

    opacity: 1;
    padding: 0.1px;
    position: relative;
}

.header::before {
    content: '';
    width: 1200px;
    /* height: calc(100vh - 237px); */
    height: 609px;
    position: absolute;
    left: calc((100vw - 1200px) /2);
    background-image: url(/images/home/Frame.png), url(/images/home/img_home_d_role.png);
    background-size: 277px 63px, 870px 610px;
    background-position: left 196px, 410px 0;
    background-repeat: no-repeat;
}
</style>
<style lang="scss" scoped>
.input-box {
    width: 535px;
    height: 52px;
    background: #FFFFFF;
    border-radius: 7px 7px 7px 7px;
    opacity: 1;
    border: 1px solid #FFFFFF;
    padding: 1px;
    margin-top: 279px;
    display: flex;

    &-select {
        display: flex;
        width: 75px;
        height: 100%;
        align-items: center;
        background-image: url(/images/home/btn_home_drop_down.png);
        background-repeat: no-repeat;
        background-size: 10px 10px;
        background-position: right center;
        color: #4062FF;
        padding-left: 22px;
        font-size: 16px;
    }

    &-form-item {
        width: 329px;
        height: 100%;
        padding: 0 10px 0 32px;

        input {
            padding: 0 10px;
            width: 100%;
            border: none;
            outline: none;
            height: 100%;
        }
    }

    &-search {
        flex: 1;
        height: 100%;
        color: #fff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #4365FF;
        border-radius: 0 7px 7px 0;

    }

}

.keywords {
    margin-top: 31px;
    display: flex;

    span {
        width: 84px;
        height: 30px;
        border-radius: 20px 20px 20px 20px;
        opacity: 1;
        border: 1px solid #FFFFFF;
        color: #fff;
        display: flex;
        margin-right: 16px;
        align-items: center;
        justify-content: center;
    }

}

.ad {
    height: 237px;
    background: #fff;
    // border-radius: 6px 6px 6px 6px;
    padding: 20px 0 30px;

    &-list {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-item {
            width: 384px;
            height: 187px;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            overflow: hidden;

            img {
                width: 384px;
                display: block;
                height: 187px;
            }
        }
    }

}

.recommend {
    min-height: 462px;
    padding: 40px 0 30px;

    .static-content-title {
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
    }

    &-grid-cell {
        width: 594px;
        height: 152px;
        background: #FAFAFA;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #EEEEEE;
        margin-bottom: 16px;
    }
}

.new-recruit {
    height: 637px;
    background-image: url(/images/home/img_home_new_posts.png);
    background-size: 1920px 637px;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 64px;

    &-title {
        font-size: 32px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        line-height: 38px;
        margin-bottom: 20px;
    }

    .tabs {
        margin-bottom: 16px;
        height: 30px;
    }

    .intro {
        // height: 406px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
        border-radius: 4px;
        // flex-wrap: wrap;
        padding: 20px 0;

        // display: flex;
        .intromore {
            width: 183px;
            height: 40px;
            background: #F2F7FF;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            border: 1px solid #C2CDFF;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #4062FF;
            line-height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
                transition: all .3s;
            }
        }

        .intromore:hover img {
            transform: translate(5px, 0);
        }
    }
}

.remen-qiye {
    height: 700px;
    background: #F2F4F7;
    padding-top: 64px;

    &-title {
        font-size: 32px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 38px;
        text-align: center;
        margin-bottom: 20px;
    }

    &-container {
        height: 494px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
        border-radius: 8px;
    }
}
</style>